<template>
    <div class="newmueses">
      <div class="tanxin newmueses_top">
        <h2>{{ name[1] }}</h2>
        <ul>
          <li>{{ name[2] }}</li>
          <li>{{ name[0] }}</li>
          <li>{{ name[3] }}</li>
          <li>{{ name[0] }}</li>
          <li>{{ name[4] }}</li>
          <li>{{ name[0] }}</li>
          <li>{{ name[5] }}</li>
          <li>{{ name[0] }}</li>
          <li>{{ name[6] }}</li>
        </ul>
      </div>
      <div class="newmueses_botton">
        <ul class="tanxin">
          <li v-for="(item, index) in list" :key="index">
            <img :src="item.blurPicUrl" alt="" />
            <i></i>
            <span></span>
            <h4 class="ellipsis">{{ item.name }}</h4>
  
            <p class="ellipsis">{{ item.artists[0].name }}</p>
          </li>
        </ul>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    props: ["list", "name"],
    data() {
      return {
        nameq: 1,
      };
    },
  };
  </script>
   
  <style lang = "less" scoped>
  @import "../../assets/base.less";
  .newmueses {
    width: 900px;
    margin: 0 auto;
    padding-top: 40px;
    .newmueses_top {
      height: 42px;
      line-height: 42px;
      border-bottom: 2px solid @red;
      justify-content: flex-start;
      margin-bottom: 15px;
      h2 {
        font-weight: 400;
        font-size: 22px;
        margin-right: 20px;
        &.active {
          display: none;
        }
      }
      ul {
        display: flex;
        height: 42px;
        margin-top: 17px;
        li {
          width: 60px;
          height: 14px;
          font-size: 14px;
          line-height: 14px;
          text-align: center;
          &:nth-child(2n) {
            width: 2px;
          }
        }
      }
    }
    .newmueses_botton {
      margin-top: 5px;
      ul {
        width: 900px;
        justify-content: flex-start;
        flex-wrap: wrap;
        li {
          width: 153px;
          height: 208px;
          position: relative;
          margin-right: 33px;
          &:nth-child(5n) {
            margin-right: 0;
          }
          img {
            width: 130px;
            height: 130px;
          }
          i {
            position: absolute;
            top: 0;
            left: 0;
            width: 153px;
            height: 130px;
            background-image: url("../../assets/coverall.png");
            background-position: 0 -845px;
          }
          span {
            width: 28px;
            height: 28px;
            position: absolute;
            right: 26px;
            bottom: 81px;
            background-image: url("../../assets/iconall.png");
            background-position: 0 -170px;
          }
          h4 {
            font-weight: 400;
            font-size: 16px;
          }
          p {
            font-size: 12px;
            color: #ccc;
          }
        }
      }
    }
  }
  </style>